/*
 * Because some pages have 6 example code files and each of those has a screenshot,
 * a terminal output screenshot, and a source code screenshot... that's why I need
 * so many of these.
 * And it's the same for the modal close buttons, too.
 */
#img0, #img1, #img2, #img3, #img4,
#img5, #img6, #img7, #img8, #img9,
#imga, #imgb, #imgc, #imgd, #imge, #imgf,
#imgm, #imgn, #imgp, #imgq, #imgr,
#imgs, #imgt, #imgu, #imgv, #imgw, #imgx, #imgy, #imgz,
#img1a, #img2b, #img3c, #img4d, #img5e, #img6f,
#diagram0, #diagram1, #diagram2, #diagram3, #diagram4, #diagram5,
#diagram6, #diagram7, #diagram8
{
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

#img0:hover, #img1:hover, #img2:hover, #img3:hover, #img4:hover,
#img5:hover, #img6:hover, #img7:hover, #img8:hover, #img9:hover,
#imga:hover, #imgb:hover, #imgc:hover, #imgd:hover, #imge:hover, #imgf:hover,
#imgm:hover, #imgn:hover, #imgp:hover, #imgq:hover, #imgr:hover,
#imgs:hover, #imgt:hover, #imgu:hover, #imgv:hover, #imgw:hover, #imgx:hover,
#imgy:hover, #imgz:hover,
#img1a:hover, #img2b:hover, #img3c:hover, #img4d:hover, #img5e:hover, #img6f:hover,
#diagram0:hover, #diagram1:hover, #diagram2:hover,
#diagram3:hover, #diagram4:hover, #diagram5:hover,
#diagram6:hover, #diagram7:hover, #diagram8:hover,

{
	opacity: 0.7;
}

/* The Modal (background) */
.modal
{
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* The Modal (background) */
.diagram-modal
{
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* Modal Content (image) - By leaving out width parameter, the images are displayed in their original size. */
.modal-content
{
	margin: auto;
	display: block;
	max-width: 1080px;
}

/* Caption of Modal Image */
#caption
{
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

/* Add Animation */
.modal-content, #caption
{  
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}

@-webkit-keyframes zoom
{
	from
	{
		-webkit-transform:scale(0)
	} 
	to
	{
		-webkit-transform:scale(1)
	}
}

@keyframes zoom
{
	from
	{
		transform:scale(0)
	} 
	to
	{
		transform:scale(1)
	}
}

/* The Close Button */
.close0, .close1, .close2, .close3, .close4,
.close5, .close6, .close7, .close8, .close9,
.closea, .closeb, .closec, .closed, .closee, .closef,
.closem, .closen, .closep, .closeq, .closer,
.closes, .closet, .closeu, .closev, .closew, .closex, .closey, .closez, 
.close1a, .close2b, .close3c, .close4d, .close5e, .close6f,
.diagram-close0, .diagram-close1, .diagram-close2, .diagram-close3,
.diagram-close4, .diagram-close5, .diagram-close6, .diagram-close7, .diagram-close8
{
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close0:hover, .close1:hover, .close2:hover, .close3:hover, .close4:hover,
.close5:hover, .close6:hover, .close7:hover, .close8:hover, .close9:hover,
.closea:hover, .closeb:hover, .closec:hover, .closed:hover, .closee:hover,
.closem:hover, .closen:hover, .closep:hover, .closeq:hover, .closer:hover,
.close0:focus, .close1:focus, .close2:focus, .close3:focus, .close4:focus, 
.close5:focus, .close6:focus, .close7:focus, .close8:focus, .close9:focus, 
.closea:focus, .closeb:focus, .closec:focus, .closed:focus, .closee:focus,
.closem:focus, .closen:focus, .closep:focus, .closeq:focus, .closer:focus,
.closes:focus, .closet:focus, .closeu:focus, .closev:focus, .closew:focus,
.closex:focus, .closey:focus, .closez:focus,
.close1a:focus, .close2b:focus, .close3c:focus, .close4d:focus, .close5e:focus,
.close6f:focus,
.diagram-close0:focus, .diagram-close1:focus, .diagram-close2:focus,
.diagram-close3:focus, .diagram-close4:focus, .diagram-close5:focus,
.diagram-close6:focus, .diagram-close7:focus, .diagram-close8:focus
{
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px)
{
	.modal-content
	{
		width: 100%;
	}
}
